<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    @close="closeOpen"
    :before-close="onCancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="分类名称" prop="sortName">
            <el-input v-model="form.sortName" placeholder="请输入分类名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级分类" prop="sortPrantName">
            <el-popover
              placement="bottom"
              width="400"
              trigger="click">
              <el-tree
                :data="treeData"
                :props="defaultProps"
                default-expand-all
                highlight-current
                show-checkbox
                @check="handleFormNodeClick"
              />
              <el-input slot="reference" v-model="form.sortPrantName" placeholder="请选择上级分类"/>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="false">
          <el-form-item label="上级分类编号" prop="sortPrantNo">
            <el-input v-model="form.sortPrantNo" placeholder="上级分类编号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="顺序号" prop="orderNo">
            <el-input v-model="form.orderNo" placeholder="请输入顺序号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主表名称" >
            <el-select v-model="form.sortMainTableNo" :disabled="form.isLast === '1'"  placeholder="请选择主表名称">
              <el-option
                v-for="(item,index) in tableOptions"
                :key="index"
                :label="item.tableName"
                :value="item.recNo"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="展示表名称" >
            <el-select v-model="form.sortViewTableNo" :disabled="form.isLast === '1'" placeholder="请选择展示表名称">
              <el-option
                v-for="(item,index) in tableOptions"
                :key="index"
                :label="item.tableName"
                :value="item.recNo"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="子表名称"  prop="sortSublist">
            <el-select multiple v-model="form.sortSublist" :disabled="form.isLast === '1'" placeholder="请选择子表名称">
              <el-option
                v-for="(item,index) in tableOptions"
                :key="index"
                :label="item.tableName"
                :value="item.recNo"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="底层分类" prop="isLast">
            <el-radio-group v-model="form.isLast" @change="lastCateChange">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="档号规则" prop="sortArcNoCnt">
            <el-input v-model="form.sortArcNoCnt" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">确 定</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addSort, updateSort } from '@/api/system/sort'

export default {
  name: 'commonDialog',
  // 这里呀 调用的父组件川传过来的  你直接绑定form form是个对象  你input v-model一个对象干嘛

  props:['title','form','open','closeOpen','treeData','defaultProps','handleFormInfoNodeClick','tableOptions','submitForm','cancel',"nodeDataNo","getList","getTree"],
  data(){
    return {
      // 表单校验
      rules: {
        sortName: [
          { required: true, message: "分类名称不能为空", trigger: "blur" }
        ],
        sortPrantName: [
          { required: true, message: "父级分类不能为空", trigger: "blur" }
        ],
        sortArcNoCnt: [
          { required: true, message: "档号组成规则不能为空", trigger: "blur" }
        ],
        isLast: [
          { required: true, message: "是否底层分类不能为空", trigger: "blur" }
        ],
        orderNo: [
          { required: true, message: "顺序号不能为空", trigger: "blur" },
          { pattern:'^\\d+$|^\\d+[.]?\\d+$',message: "请输入数字", trigger: "blur"}
        ]
      }
    }
  },
  methods:{
    // 选择父级
    handleFormNodeClick(data){
      this.handleFormInfoNodeClick(data)
    },
     onSubmit(){
      // this.form.sortPrantNo = this.nodeDataNo
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if(this.form.sortSublist){
            this.form.sortSublist = this.form.sortSublist.join(",")
          }
          if (this.form.recNo != null) {
            const res = await updateSort(this.form)
            if(res.code === 200){
              this.msgSuccess("修改成功");
              this.closeOpen()
              this.getList();
              this.getTree()
            }
          } else {
            const res = await addSort(this.form)
            if(res.code === 200){
              this.msgSuccess("新增成功");
              this.closeOpen()
              this.getList();
              this.getTree()
            }
          }
        }
      });
    },
      onCancel(){
        this.cancel()
      },
    //  切换底层分类单选框
    lastCateChange(Radio){
      if(Radio === '1'){
        this.form.sortMainTableNo = ''
        this.form.sortViewTableNo = ''
        this.form.sortSublist = ''
      }
    }
  }
}
</script>

<style scoped>

</style>
